<template>
  <div>
    <div class="top">
      <el-form ref="inForm" :model="inputForm" label-width="120px" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="运单编号:" prop="id">
              <el-input v-model="inputForm.id" type="text" placeholder="请输入运单编号" autocomplete="off" style="width: 220px;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单编号:" prop="orderId">
              <el-input v-model="inputForm.orderId" type="text" placeholder="请输入订单编号" autocomplete="off" style="width: 220px;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调度状态:" prop="schedulingStatus">
              <el-select v-model="inputForm.schedulingStatus" placeholder="请选择" autocomplete="off" style="width: 220px;">
                <el-option label="待调度" value="1" />
                <el-option label="未匹配线路" value="2" />
                <el-option label="已调度" value="3" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="起始地机构:" prop="startAgencyId">
              <el-select ref="selectTree1" value="" type="text" :placeholder="startA?startA:'请选择起始地机构'" autocomplete="off" style="width: 220px;">
                <el-tree :data="agencyList" :props="defaultProps" @node-click="handleNodeClick1" />
                <el-option
                  v-for="item in agencyList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构:" prop="endAgencyId">
              <el-select ref="selectTree2" value="" type="text" :placeholder="endA?endA:'请选择目的地机构'" autocomplete="off" style="width: 220px;">
                <el-tree :data="agencyList" :props="defaultProps" @node-click="handleNodeClick2" />
                <el-option
                  v-for="item in agencyList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前所在地机构:" prop="currentAgencyId">
              <el-select ref="selectTree3" value="" type="text" :placeholder="currentA?currentA:'请选择当前所在地机构'" autocomplete="off" style="width: 220px;">
                <el-tree :data="agencyList" :props="defaultProps" @node-click="handleNodeClick3" />
                <el-option
                  v-for="item in agencyList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 标签 -->
    <div class="top">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">全部</el-tab-pane>
          <el-tab-pane label="新建" name="second">新建</el-tab-pane>
          <el-tab-pane label="已装车" name="third">已装车</el-tab-pane>
          <el-tab-pane label="运输中" name="fourth">运输中</el-tab-pane>
          <el-tab-pane label="到达终端网点" name="five">到达终端网点</el-tab-pane>
          <el-tab-pane label="拒收" name="six">拒收</el-tab-pane>
        </el-tabs>
      </template>
    </div>
    <!-- 表格 -->
    <div class="top">
      <template>
        <el-table

          :data="tableData"
          stripe
          style="width: 100%"
          height="250"
        >
          <el-table-column
            :index="indexMethod"
            type="index"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="id"
            label="运单编号"
            width="190"
          />

          <el-table-column
            prop="orderId"
            label="订单编号"
            width="190"
          />
          <el-table-column
            prop="statusText"
            label="运单状态"
            width="180"
            :statustext="statustext"
          ><template v-slot="{row}">
            <span>{{ statustext(row) }}</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="schedulingStatus"
            label="调度状态"
            width="120"
            :sche-status="scheStatus"
          >
            <template v-slot="{row}">
              <span>{{ scheStatus(row) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="startAgencyName"
            label="起始营业部"
            width="120"
          />
          <el-table-column
            prop="endAgencyName"
            label="终点营业部"
            width="120"
          />

          <el-table-column
            prop="currentAgencyName"
            label="当前所在营业部"
            width="180"
          />
          <el-table-column
            prop="nextAgencyName"
            label="下一个机构"
            width="180"
          />
          <el-table-column
            prop="totalVolume"
            label="货品总面积（立方米）"
            width="120"
          />
          <el-table-column
            prop="totalWeight"
            label="货品总重量（千克）"
            width="180"
          />

          <el-table-column
            prop="created"
            label="创建时间"
            width="180"
          />
          <el-table-column
            prop="updated"
            label="更新时间"
            width="180"
          />

          <el-table-column
            fixed="right"
            label="操作"
            width="120"
          >
            <template>
              <el-button type="text" size="small" @click="detailPage">查看详情</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        style="text-align: center;"
        :current-page="list.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="list.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+counts"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>
  </div>

</template>

<script>
import { getWayBillAPI, getAgencyAPI } from '@/views/business/API/waybill'
import { replaceKeyNameWithLabelInArray } from '@/utils'
export default {
  name: 'Waybill',
  data() {
    return {
      startA: '', // 起始机构名字
      endA: '',
      currentA: '',
      inputForm: {
        currentAgencyId: '',
        endAgencyId: '',
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10,
        schedulingStatus: null,
        startAgencyId: ''
      },
      list: { page: 1, pageSize: 10, id: '', orderId: '' },
      counts: 10,
      tableData: [],
      activeName: 'second',
      agencyList: [], // 转运点
      defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
  },
  computed: {
    // 改状态
    statustext(row) {
      return (row) => {
        switch (row.status) {
          case 1:
            return '待调度'
          case 2:
            return '未匹配线路'
          default:
            return '已调度'
        }
      }
    },
    scheStatus(row) {
      return (row) => {
        switch (row.status) {
          case 1:
            return '新建'
          case 2:
            return '已装车，发往x转运中心'
          case 3:
            return '到达'
          case 4:
            return '到达终端网点'
          case 5:
            return '已签收'
          default:
            return '拒收'
        }
      }
    }
  },
  async created() {
    const res = await getAgencyAPI()// 装运点
    // console.log(res)
    const arr = JSON.parse(res.data)
    this.agencyList = replaceKeyNameWithLabelInArray(arr)// 树状
    console.log(this.agencyList)

    this.getWayBillList()
  },

  methods: {
    // 树状
    handleNodeClick1(data) {
      // console.log(data)
      this.inputForm.startAgencyId = data.id
      this.startA = data.label
      this.$refs.selectTree1.blur()
    },
    handleNodeClick2(data) {
      // console.log(data)
      this.inputForm.endAgencyId = data.id
      this.endA = data.label
      this.$refs.selectTree2.blur()
    },
    handleNodeClick3(data) {
      // console.log(data)
      this.inputForm.currentAgencyId = data.id// 储存在inputform，发请求带出去
      this.currentA = data.label// 获取到的名字存在data
      this.$refs.selectTree3.blur()// 实例选择器+失焦方法
    },
    async getWayBillList() {
      const res = await getWayBillAPI(this.list)// 获取列表
      console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 分页
    sizeChange(pageSize) {
      this.list.pageSize = pageSize
      this.getWayBillList()
    },
    currentChange(page) {
      this.list.page = page
      this.getWayBillList()
    },
    // 序号
    indexMethod(index) {
      return (this.list.page - 1) * this.list.pageSize + index + 1
    },
    // 搜索
    async search() {
      const res = await getWayBillAPI(this.inputForm)
      // console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },
    // 重置
    reset() {
      this.$refs.inForm.resetFields()
      this.startA = ''
      this.endA = ''
      this.currentA = ''
    },
    handleClick() {
      console.log('点击标签')
    },
    // 查看详情
    detailPage() {
      this.$router.push('/business/add-waybill')
    }

  }

}
</script>

<style>
.top{
    padding-top: 20px;
    margin: 20px;
    background-color: #fff;
}
</style>
